<template>
	<view class="">
		<u-toast ref="uToast"></u-toast>
		<view class="logo">
			<image src="@/static/img/logo.png" alt="" />
		</view>
		<view class="prompt">
			<p>Hi, Welcome Login One Strategy Group</p>
		</view>
		<view class="bot">
			<u-form :model="loginForm" :rules="rules" ref="uForm">
				<u-form-item prop="username" ref="username" label="Number" labelPosition="top">
					<u-input placeholder="Please enter your account number" class="u-inp" v-model="loginForm.username"
						clearable />
				</u-form-item>
				<u-form-item prop="password" ref="password" label="Password" labelPosition="top">
					<u-input placeholder="Please enter your password" class="u-inp" v-model="loginForm.password"
						clearable :password="showPassword">
						<template slot="suffix">
							<u-icon :name="eyes" @click="hidepwd"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<view>
					<button class="login-btn" @click="submit">login</button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import loginApi from "@/api/login.js"
	export default {
		options: { //如想在微信小程序中深度监听修改样式必须配此选项
			addGlobalClass: true
		},
		data() {
			return {
				showPassword: true,
				//小眼睛
				eyes: 'eye-off',
				//表单数据
				loginForm: {
					username: "",
					password: "",
				},
				//表单验证规则
				rules: {
					username: [{
						type: 'string',
						required: true,
						message: 'Please enter your account number',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							// 返回true表示校验通过，返回false表示不通过
							return uni.$u.test.isEmpty(!value);
						},
						message: 'The input cannot be empty',
						trigger: ['blur'],
					}],
					password: [{
						type: 'string',
						required: true,
						message: 'Please enter your password',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.isEmpty(!value);
						},
						message: 'The input cannot be empty',
						trigger: ['blur'],
					}]
				},
			};
		},

		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			jump() {
				uni.switchTab({
					url: '../home/index',
				});
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.handleClick()
				}).catch(errors => {
					uni.$u.toast('请重新输入账号密码')
				})
			},
			//点击登录按钮
			handleClick() {
				loginApi.login(this.loginForm).then((res2) => {
					if (res2.status == 200) {
						uni.setStorage({
							key: "token",
							data: res2.data.token,
							success: () => {
								this.$store.dispatch('login',res2.data.userId)
								this.$refs.uToast.show({
									type: 'success',
									message: "登陆成功！",
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
								})
								uni.switchTab({
									url: '../home/index?userId=' + res2.data.userId,
								});
							},
						});
					} else {
						uni.$u.toast(res2.message);
					}
				});
				loginApi.getInfo()
			},
			//显示隐藏密码
			hidepwd() {
				this.showPassword = !this.showPassword;
				this.eyes = this.showPassword ? 'eye-off' : 'eye'
			},
		}
	}
</script>

<style scoped>
	.logo {
		width: 228rpx;
		height: 124rpx;
		margin-top: 118rpx;
	}

	.logo image {
		width: 100%;
		height: 100%;
	}

	.prompt {
		margin: 86rpx 0;
		width: 492rpx;
		font-size: 56rpx;
		font-family: uniqueID∞version∞WorkSans∞Light, uniqueID∞version∞WorkSans∞Light;
		color: #3F3F44;
		line-height: 80rpx;
	}

	::v-deep .prompt .u-input {
		border: none !important;
		width: 654rpx;
		height: 112rpx;
		background: #F7F7F7;
	}

	.u-border {
		border: none !important;
		width: 654rpx;
		height: 98rpx;
		margin-top: 26rpx;
		background: #F7F7F7;
	}

	.login-btn {
		width: 654rpx;
		background: #88a8ce;
		color: #ffffff;
		padding: 10rpx 0;
		margin-top: 64rpx;
	}
</style>